<template>
  <div>
    <!-- 标题 -->
    <el-row>
      <el-col :span="22">
        <div id="title">
          <i class="el-icon-house"></i>
          <b>活动管理</b>
        </div>
      </el-col>
      <el-col :span="2">
        <!-- 批量删除 -->
        <el-button type="danger"
                   @click="delectAll(handleSelectionChange)">批量删除
        </el-button>
      </el-col>
    </el-row>
    <!-- 表格主体 -->
    <el-table :data="tableData"
              @selection-change="handleSelectionChange">
      <el-table-column type="selection"></el-table-column>
      <el-table-column label="发起者"
                       align="center"
                       width="100"
                       prop="user.account"></el-table-column>
      <el-table-column label="归属小区"
                       align="center"
                       width="100"
                       prop="community.name"></el-table-column>
      <el-table-column label="活动图片"
                       align="center"
                       prop="image"
                       width="100">
        <template slot-scope="td">
          <img :src="td.row.image"
               style="width:80px;height:80px;" />
        </template>
      </el-table-column>
      <el-table-column label="活动地点"
                       align="center"
                       prop="address"
                       width="130"
                       :show-overflow-tooltip='true'></el-table-column>
      <el-table-column label="活动标题"
                       align="center"
                       prop="name"
                       width="180"
                       :show-overflow-tooltip='true'></el-table-column>
      <el-table-column label="活动时间"
                       align="center"
                       prop="time"></el-table-column>
      <el-table-column label="活动内容"
                       align="center"
                       prop="content"
                       width="180"
                       :show-overflow-tooltip='true'></el-table-column>
      <el-table-column label="活动进度"
                       align="center"
                       width="80">
        <template slot-scope="td">
          <span v-if="td.row.result===0">
            <b style="color:orange">未开始</b>
          </span>
          <span v-if="td.row.result===1">
            <b style="color:green">报名中</b>
          </span>
          <span v-if="td.row.result===2">
            <b style="color:red">已结束</b>
          </span>
        </template>
      </el-table-column>
      <el-table-column label="操作"
                       align="center"
                       width="200">
        <template slot-scope="td">
          <!-- 查看报名名单 td.row当前这一行的对象 -->
          <el-button type="success"
                     size="mini"
                     @click="show(td.row)">报名名单</el-button>
          <!-- 删除 -->
          <el-button type="danger"
                     size="mini"
                     @click="del(td.$index,td.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"
                   :current-page="currentPage"
                   :page-sizes="[5, 10, 15]"
                   :page-size="size"
                   layout="total, sizes, prev, pager, next, jumper"
                   :total="total">
    </el-pagination>

    <!-- 查看：对话框 -->
    <el-dialog title="报名名单"
               :visible.sync="dialogVisible"
               width="60%">
      <!-- 使用子组件 -->
      <activitydetail :activity="currentActivity"
                      :userData="currentUsers"
                      :user="currentUser"
                      v-if="refresh"></activitydetail>
      <span slot="footer"
            class="dialog-footer">
        <el-button type="primary"
                   @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
//导入子组件
import activitydetail from '../../property/Management/activitydetail'

//导入axios
import axios from '../../../axios_config'
import Commons from '../../../js/commons'

export default {
  data () {
    return {
      tableData: [],           //表格数据
      currentActivity: {},     //指向当前被选中的activity信息
      currentUsers: [],        //用于将当前名单数据传给子组件
      currentUser: [],         //用于将当前发起人传给子组件
      dialogVisible: false,    //报名名单对话框是否显示
      refresh: true,           //强制刷新子组件
      currentPage: 1,          //当前页
      total: 0,                //总条数
      totalPage: 0,            //总页数
      size: 5,                 //每一页大小
      multipleSelection: [],   //每一行数据的选择框
    }
  },
  methods: {
    //查看报名名单
    show (row) {
      //强制刷新
      this.refresh = false;
      this.$nextTick(() => {
        this.refresh = true;
      });
      //显示对话框
      this.dialogVisible = true;
      //发起请求查看当前活动以及报名名单
      axios.get("http://192.168.11.18:8080/activity/findActivityUsersDtoById?id=" + row.id)
        .then(res => {
          //赋值给currentActivity，currentUsers用于传给子组件
          this.currentActivity = res.data.data;
          this.currentUsers = res.data.data.users;
          this.currentUser = res.data.data.user;
        });
    },

    //删除
    del (index, row) {
      this.$confirm('您确定要删除该条记录？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
        //从表格中删除当行数据
        this.tableData.splice(index, 1);
        //row.id 才是数据库中的id
        axios.get("http://192.168.11.18:8080/activity/del?id=" + row.id)
          .then(res => {

          })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    //批量删除
    delectAll () {
      this.$confirm('您确定要删除选中记录？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        if (this.multipleSelection.length != 0) {
          //后台删除  
          for (let j = 0; j < this.multipleSelection.length; j++) {
            //数据库中的真正的活动id
            let id = this.multipleSelection[j].id;
            //发送请求将status改为1
            axios.get("http://192.168.11.18:8080/activity/del?id=" + id)
              .then(res => {

              })
          }
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          //前端删除
          for (let i = 0; i < this.tableData.length; i++) {
            const element = this.tableData[i];
            element.id = i
          }
          this.multipleSelection.forEach(element => {
            this.tableData.forEach((e, i) => {
              if (element.id == e.id) {
                this.tableData.splice(i, 1)
              }
            });
          });
        } else {
          this.$message.error('请先至少选择一项');
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },

    //多选框将选中数据赋给全局变量
    handleSelectionChange (val) {
      this.multipleSelection = val;
    },
    
    //根据页码查询当前页数据
    findByPage () {
      axios.get("http://192.168.11.18:8080/activity/platFindAllActivity/?current=" + this.currentPage + "&size=" + this.size)
        .then(res => {
          //   console.log(res);
          // 表格中装活动数据
          this.tableData = res.data.data;
          //分页数据
          this.total = res.data.total;
          this.totalPage = res.data.totalPage;
          this.currentPage = res.data.currentPage;
          this.size = res.data.pageSize;
        });
    },

    //修改每一页大小
    handleSizeChange (size) {
      console.log("选择" + size);
      this.size = size;
      //发送请求获取当前页数据    page    size
      this.findByPage();
    },

    //选择第几页
    handleCurrentChange (page) {
      console.log("选择:" + page + "页");
      this.currentPage = page;
      //发送请求获取当前页数据    page    size
      this.findByPage();
    },
  },
  //注册子组件
  components: {
    activitydetail
  },
  //当前组件创建完毕时
  mounted () {
    //调用方法获取第一页数据
    this.findByPage();
  }

}
</script>

<style scoped>
#title {
  margin-left: 10px;
  font-size: 20px;
}
</style>